<template>
<div>
    <div>
        <table>
            <tr>
                <td>用户名</td>
                <td><input type="text" v-model="name"></td>
            </tr>
            <Button type="submit" @click="punch">打卡</Button>
        </table>
    </div>


    <!-- 用户展示 -->
    <div>
        <table border="1" width='300'>
            <tr>
                <th>姓名</th>

                <th>操作</th>
            </tr>
            <tr v-for="(item,index) in peoplelist" :key="index">
                <td>{{item.name}}</td>
                <td><Button @click="upgrade(item.id)">升级部门</Button></td>
                <td><Button @click="punch(item.name)">打卡下班</Button></td>

            </tr>
        </table>
    </div>
    <!-- 搜索打卡记录 -->
    <div>
        <br>
        <!-- 搜索功能 -->
		<Search @search="search" v-model="text" ></Search>
        <table border="1" v-show="text">
            <tr>
                <th>名称</th>
                <th>打卡日期</th>
                <th>上班时间</th>
                <th>下班时间</th>
                <th>积分变换</th>
            </tr>
            <tr v-for="(item,index) in cardlist" :key="index">
                <td>{{item.name}}</td>
                <td>{{item.push_time | make_time}}</td>
                <td>{{item.work_time | make_time}}</td>
                <td>{{item.off_tiem | make_time}}</td>
                <td>{{item.fen}}</td>

            </tr>
        </table>

    </div>


</div>
</template>

<script>
export default {
    data () {
        return {
            text:'',
            name:'',
            peoplelist:[],
            cardlist:[]

        }
    },
    methods: {
        //检索功能
        search(){
             this.axios.get('http://127.0.0.1:8000/mylearn/search/',{params:{'text':this.text}})
            .then(result=>{
                console.log(result)
                this.cardlist=result.data.data
            })
            
        },
        //打卡功能
        punch(){
            this.axios.get('http://127.0.0.1:8000/mylearn/punch/',{params:{'name':this.name}})
            .then(result=>{
                console.log(result)
                this.$Message(result.data.message)
            })
        },
        peoples(){
             this.axios.get('http://127.0.0.1:8000/mylearn/showuser/')
            .then(result=>{
                console.log(result)
                this.peoplelist=result.data
            })

        },
        //升级按钮
        upgrade(id){
            this.axios.get('http://127.0.0.1:8000/mylearn/upgrade/',{params:{'id':id}})
            .then(result=>{
            console.log(result)
            })
        }
    },
    created() {
        this.peoples();
        // this.search()
    },
    //自定义过滤器
    filters: {
        make_time(str){
            str=str.replace('T',' ')
            return str
        }
    }

}
</script>

<style>

</style>
